<template>
    <div class='dialog'>
        <div class='newAdd dialog-con supplyInfo'>
          <split-vertical title="新增供应商信息"></split-vertical>
            <div class="form">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" inline class="demo-ruleForm" :label-position="labelPosition">
                    <el-form-item label="供应商名称" prop="supplyName">
                        <el-input v-model="ruleForm.supplyName"></el-input>
                    </el-form-item>
                    <el-form-item label="供应商编码" prop="supplyCode">
                        <el-input v-model="ruleForm.supplyCode"></el-input>
                    </el-form-item>
                    <el-form-item label="公司地址" prop="supplyAddress">
                        <el-input v-model="ruleForm.supplyAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人电话" prop="supplyMobile">
                        <el-input v-model="ruleForm.supplyMobile"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人姓名" prop="supplyContact">
                        <el-input v-model="ruleForm.supplyContact"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人职位" prop="supplyContactPosition">
                        <el-input v-model="ruleForm.supplyContactPosition"></el-input>
                    </el-form-item>
                    <el-form-item label="开户行账号" prop="supplyAccount">
                        <el-input v-model="ruleForm.supplyAccount" oninput = "value=value.replace(/[^\d]/g,'')"></el-input>
                    </el-form-item>
                    <el-form-item label="开户行名称" prop="supplyAccountName">
                        <el-input v-model="ruleForm.supplyAccountName"></el-input>
                    </el-form-item>
                  <el-form-item label="公司三证" prop="supplyCertificate" style="margin-right:130px;">
                    <el-radio-group v-model="ruleForm.supplyCertificate" >
                      <el-radio label="有"></el-radio>
                      <el-radio label="无"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                    <el-form-item label="合作方式" prop="cooperationType">
                        <el-select v-model="ruleForm.cooperationType" placeholder="请选择">
                            <el-option
                            v-for="item in cooperationMethods"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                  <el-form-item label="授权品牌" prop="brands">
                    <el-select v-model="ruleForm.brands" placeholder="请选择"    multiple style="min-height:50px;width: 300px;" >
                      <el-option
                        v-for="item in brandList"
                        :key="item.id"
                        :label="item.bname"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>

                    <el-form-item class="btn">
                        <el-button @click="submitForm('ruleForm')" type="primary" size="medium"  :disabled="isSupplyBtn">提交</el-button>
                        <el-button @click="cancel"  size="medium">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import SplitVertical from "components/common/SplitVertical"
import {localStorage} from "js/localStorage"
export default {
    inject:['reload'],
    components:{
      SplitVertical
    },
    data(){
        return{
            userId:'',
            //创建按钮是否禁用
            isSupplyBtn:false,
            brandList:[],
            //合作方式假数据
            cooperationMethods:[{
                value: '1',
                label: '直采直销'
            },{
                 value: '2',
                label: '一件代发'
            }],
            labelPosition:'right',
            obj:{
                companyName:[],
                companyCode:[],
                selnameArr: []
            },
            ruleForm: {
                supplyName:'',
                supplyCode:'',
                supplyAccount:'',
                supplyAccountName:'',
                supplyAddress:'',
                supplyCertificate:'',
                supplyContact :'',
                supplyContactPosition:'',
                supplyMobile:'',
                cooperationType:'',
                brands:'',
            },
            rules: {
                supplyName: [
                    { required: true, message: '请输入供应商名称', trigger: 'blur' },
                    { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
                ],
                supplyCode: [
                    { required: true, message: '请输入供应商编码', trigger: 'change' }
                ],
                supplyAddress: [
                    { required: true, message: '请输入公司地址', trigger: 'change' },
                    { min: 4, max: 50, message: '长度4~50个字符', trigger: 'blur' }
                ],
                supplyMobile: [
                    { required: true, message: '请输入联系人电话', trigger: 'change' },
                    {min:7,max: 20, message: '请输入7~20位', trigger: 'blur'}
                ],
                supplyContact: [
                    { required: true, message: '请输入联系人姓名', trigger: 'change' },
                    {min: 2, message: '至少输入2位', trigger: 'blur'}
                ],
                supplyContactPosition: [
                    { required: true, message: '请输入联系人职位', trigger: 'change' },
                    {min: 2, message: '至少输入2位', trigger: 'blur'}
                ],
                supplyAccount: [
                    { required: true, message: '请输入开户行账号', trigger: 'change' },
                    {min: 5, message: '至少输入5位', trigger: 'blur'}
                ],
                supplyAccountName: [
                    { required: true, message: '请输入开户行名称', trigger: 'change' },
                    {min: 3, message: '至少输入3位', trigger: 'blur'}
                ],
                cooperationType: [
                    { required: true, message: '请选择合作方式', trigger: 'change' }
                ],
                brands: [
                    { required: true, message: '请选择授权品牌', trigger: 'change' }
                ],
                supplyCertificate: [
                    { required: true, message: '请至少选择一个公司三证', trigger: 'change' }
                ]
            }
        }
    },
    created(){
        this.selectBrand()
        this.userId =  localStorage.get('userID')
    },
    methods:{
        //获的品牌信息
        selectBrand(){
            let success=data=>{
                if(data.code=='OK'){
                    this.brandList=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
           this.api.getBrandDetail({},success)
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.confirm()
                } else {
                    return false;
                }
            });
        },
        //点击确定按钮，掉接口
        confirm(){
            let parmas=this.ruleForm
            parmas['userId'] =this.userId
            this.isSupplyBtn=true
            let success=data=>{
                if(data.code=='OK'){
                    this.$message.success('添加成功')
                    this.isSupplyBtn=false
                    this.reload()
                    this.$emit('closeDialog')
                }else{
                    this.isSupplyBtn=false
                    this.$message.error(data.msg)
                }
            }
           this.api.supplyAdd(parmas,success)
       },
       cancel(){
            this.$emit('closeDialog')
       },
    }
}
</script>


<style lang="scss" scoped>
.supplyInfo{
    width:680px;
    min-height:480px;
    .btn{
       width:100%;
      text-align: center;
    }
    .form{
      .el-input{
        width:225px;
      }
      .el-select{
        width:225px;
      }
    }

}
</style>




